<template>
	<view class="content">
		<uv-vtabs :chain="chain" :list="list" :height="height" @change="change" barWidth="200rpx" :barStyle="barStyles"
			:barItemActiveStyle="barItemActiveStyle" :barItemActiveLineStyle="barItemActiveLineStyle">
			<template v-for="(item,index) in list">
				<uv-vtabs-item :index="index" :key="index">
					<view style="overflow:hidden">
						<view class="chain-title">{{item.name}}</view>
						<view class="item" v-for="(item2,index2) in item.childrens" :key="index2">
							<view class="item-img" @click="detailCheck(item2)">
								<image :src="item2.image" mode="aspectFill" class="imgStyle">
							</view>
							<view class="item-title">
								<view class="text" @click="detailCheck(item2)">{{item2.name}}</view>
								<view class="label" v-if="item2.label">{{item2.label}}</view>
								<view class="inventory">库存 {{item2.inventory}}<span class="tags" v-if="item2.tags"><uv-tags :text="item2.tags" size="mini"></uv-tags>
								</span></view>
								<view class="item-contorl">
									<view class="price">
										<span class="now"><span style="font-size: 20rpx;">￥</span>{{item2.price}}</span>
										<span class="old" v-show="item2.oldPrice">￥{{item2.oldPrice}}</span>
									</view>
									<view class="cart-control-wrapper">
										<cart-control :food="item2" @add="onAdd" @decrease="onDecrease"></cart-control>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uv-vtabs-item>
			</template>
		</uv-vtabs>
		<view class="shop-cart-wrapper">
			<shop-cart ref="shopCart" :selectFoods="selectFoods">
			</shop-cart>
		</view>
	</view>
</template>

<script>
	import CartControl from '@/component/cart-control'
	import ShopCart from '@/component/shop-cart.vue'

	export default {
		components: {
			CartControl,
			ShopCart
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			name: {
				type: String,
				default: ''
			},
			height: {
				type: Number,
				default: ''
			},
			barStyles: {
				type: Object,
				default: () => ({
					fontSize: '14px',
					color: '#1975ed'
				})
			},
			barItemActiveStyle: {
				type: Object,
				default: () => ({
					color: '#1975ed',
					fontWeight: '500'
				})
			},
			barItemActiveLineStyle: {
				type: Object,
				default: () => ({
					background: '#1975ed',
					width: '4px'
				})
			}
		},
		data() {
			return {
				chain: true,
				selectedFood: {},
			}
		},
		computed: {
			seller() {
				return this.data.seller
			},
			selectFoods() {
				return this.list.reduce((foods, good) => {
					const selected = good.childrens.filter(food => food.count);
					return foods.concat(selected);
				}, []);
			}
		},
		async onReady() {
			try {
				uni.showLoading({
					title: '加载中'
				});
				await new Promise(resolve => setTimeout(resolve, 500));
			} finally {
				uni.hideLoading();
			}
		},
		methods: {
			change(index) {
				console.log('选项改变：', index)
			},
			detailCheck(item2) {
				this.$emit('detailCheck', item2)
			},
			fetch() {
				if (!this.fetched) {
					this.fetched = true
					getGoods({
						id: this.seller.id
					}).then((goods) => {
						this.goods = goods
					})
				}
			},
			onAdd(target) {
				console.log('target', target)
				this.$refs.shopCart.drop(target)
				this.$emit('add', this.selectFoods)
				console.log('this.selectFoods', this.selectFoods)
			},
			onDecrease() {
				this.$emit('decrease', this.selectFoods)
				console.log('this.selectFoods', this.selectFoods)
			},
		}
	}
</script>

<style scoped lang="scss">
	.content_text {
		background-color: #ff6506;
		padding: 0 24rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 50rpx;
		height: 80rpx;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
	}

	.chain-title {
		padding: 16rpx;
		color: #555555;
		background-color: #f1f1f1;
		font-weight: 400;
		font-size: 26rpx;
		margin: 20rpx;
		overflow: hidden;
	}

	.item {
		padding: 10rpx 20rpx;
		display: flex;
		margin-bottom: 28rpx;

		&-img {
			.imgStyle {
				width: 75px;
				height: 75px;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
		}

		&-title {
			position: relative;
			flex: 1;
			margin-right: 10px;

			.text {
				font-weight: 600;
				font-size: 30rpx;
				color: #111;
			}

			.label {
				margin: 12rpx 0;
				font-size: 24rpx;
				line-height: 40rpx;
				color: #888888;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				word-break: break-all;
			}

			.tags {
				margin: 12rpx 0;
				display: inline-block;
			}

			.inventory {
				font-size: 28rpx;
				padding-top: 4rpx;
				color: #999;
			}

			.item-contorl {
				display: flex;
				margin-top: 24rpx;

				.price {
					line-height: 24px;
					flex: 1;

					.now {
						margin-right: 8px;
						font-size: 16px;
						color: #ff6506;
						font-weight: 500;
					}

					.old {
						text-decoration: line-through;
						font-size: 12px;
						color: #999;
					}
				}

				.cart-control-wrapper {}
			}
		}

		&-content {
			padding: 20rpx 0;

			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				word-break: break-all;
			}
		}
	}

	.gap {
		padding: 0 30rpx;
	}

	.shop-cart-wrapper {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
	}
</style>